import React, {useRef, useEffect} from 'react';
import {SafeAreaView, StyleSheet, View, TextInput, Text} from 'react-native';

const TextInputDemo7_6 = () => {
  const inputRef = useRef(null);

  return (
    <View style={styles.root}>
      <Text style={{color: 'orange', fontSize: 20, textAlign: 'center'}}>
        7_6TextInputDemo
      </Text>

      <TextInput
        style={styles.input}
        ref={inputRef}
        // autoFocus={true}
        blurOnSubmit={true}
        caretHidden={false}
        defaultValue="123456"
        editable={true}
        keyboardType="number-pad"
        returnKeyType="search"
        // maxLength={11}
        // multiline={true}
        // numberOfLines={2}
        onFocus={() => {}}
        onBlur={() => {}}
        onChange={event => {
          console.log('🚀 ~  event.nativeEvent:', event.nativeEvent);
        }}
        onChangeText={text => {
          console.log('🚀  ~ text:', text);
        }}
        // selection={{start: 0, end: 3}}
        selectionColor="red"
        // selectTextOnFocus={true}
        // secureTextEntry={true}
      ></TextInput>
    </View>
  );
};

export default TextInputDemo7_6;

const styles = StyleSheet.create({
  root: {
    backgroundColor: '#F0F0F0',
    width: '100%',
    height: 'auto',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  input: {
    width: '80%',
    height: 56,
    backgroundColor: '#D0D0D0',
    fontSize: 24,
    color: '#333333',
    fontWeight: 'bold',
    borderRadius: 10,
    paddingLeft: 15,
  },
});
